<template>
	<view class="page">
		<view class="pageBg">
			<image src="https://bjsx.gzwhir.com/admin-api/infra/file/18/get/memberbg2.png" mode="aspectFill"></image>
		</view>
		<view class="flex0">
			<u-navbar :fixed='false' bgColor="transparent" @leftClick="navBack"  title="咨询排班管理">
				<view slot="center" class="navTitle">
					咨询排班管理 
				</view>
			</u-navbar>
		</view>
		<view class="flex1">
			<scroll-view scroll-y="true"  @scroll="updateScroll" :scroll-top="scrollTop" class="scrollView pt30">
				<view class="pd30">
					<view class="filterBlock">
						<view class="block">
							<view class="select">
								<uni-data-select
								  v-model="defaultYear"
								  :localdata="yearOptions"
								  :clear="false"
								  placeholder="年"
								  @change="updateCalendar"
								></uni-data-select>
							</view>
							<view class="select">
								<uni-data-select
								  v-model="defaultMonth"
								  :localdata="monthOptions"
								  :clear="false"
								  placeholder="月"
								  @change="updateCalendar"
								></uni-data-select>
							</view>
							<view class="legend">
								<view class="l">
									<view class="dot"></view>
									<text>可约</text>
								</view>
								<view class="l gray">
									<view class="dot"></view>
									<text>不可约</text>
								</view>
							</view>
						</view>
						<view class="block">
							<view class="staticCalendar">
								<uni-calendar :selected="list" :showHeader="false" :date="(defaultYear+'-'+defaultMonth+'-'+defaultDate)" :showMonth="false" @change="selectedDate" />
							</view>
						</view>
					</view>
					<view class="schedulBlock" v-if="dates&&dates.length>0">
						<view class="tit">
							<view class="ico">
								<image src="@/static/images/icon-calendar.svg" mode="aspectFit"></image>
							</view>
							<view class="p">
								<text>{{defaultYear+'-'+(defaultMonth>9?defaultMonth:('0'+defaultMonth))+'-'+(defaultDate>9?defaultDate:('0'+defaultDate))}}</text>
								<text>{{(defaultYear+'-'+defaultMonth+'-'+defaultDate)|dateFormate('week')}}</text>
							</view>
						</view>
						<view class="ul">
							<view class="li" v-for="(i,index) in dates" :key="index" :class="{
								'useful':i.disable,
								'fill':i.appointPerson
							}">
								<view class="ll">
									<view class="d">{{i.time.split('-')[0]}}</view>
									<view>{{i.time.split('-')[1]}}</view>
								</view>
								<view class="lc">
									<view v-if="i.appointPerson" class="ap">
										<view class="at">
											{{i.appointPerson.name}}
										</view>
										<view class="p">
											咨询地点：{{i.appointPerson.location}}
										</view>
									</view>
									<view v-else>
										<text v-if="i.disable">可预约</text>
										<text v-else>不可约</text>
									</view>
								</view>
								<view class="lr">
									<view v-if="i.appointPerson">
										<view class="mr">
											<view class="p">
												已被预约
											</view>
											<view class="ico">
												<image src="@/static/images/icon-more.svg" mode="aspectFit"></image>
											</view>
										</view>
									</view>
									<view v-else>
										<u-switch @change="update" space="3" activeColor="#fe9c29" inactiveColor="#dadada" v-model="i.disable" size="20" ></u-switch>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<u-overlay :show="isLoading" :opacity="0.2">
				<u-loadmore color="#fff" iconColor="#fff" status="loading" />
			</u-overlay>
		</view>
		<view class="flex0">
			<TabBar :active="1" type="expert"></TabBar>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				oldScrollTop:0,
				scrollTop:0,
				list:[],
				isLoading:false,
				defaultYear:new Date().getFullYear(),
				defaultMonth:new Date().getMonth(),
				defaultDate:new Date().getDate(),
				dates:[]
			}
		},
		methods: {
			update(){},
			updateCalendar(){//年或者月改改，更新日历
				var that=this;
				var dayLength=new Date(that.defaultYear, that.defaultMonth, 0).getDate();
				if(that.defaultDate>dayLength){
					that.defaultDate=1
				};
				that.search()
			},
			selectedDate(e){//切换日期
				console.log(e.fulldate);
				this.defaultDate=e.date;
				this.dates=e.extraInfo.dates||[];
			},
			updateScroll(e){
				this.oldScrollTop=e.detail.scrollTop;
			},
			search(){//筛选
				var that=this;
				that.list=[];
				that.scrollTop=that.oldScrollTop;
				that.$nextTick(function() {
					that.scrollTop = 0
				});
				that.getList();
			},
			getList(){
				var that=this;
				if(that.isLoading){return;};
				that.isLoading=true;
				let timer=setTimeout(function(){
					//请求开始
					var res=[
						{
							date:'2024-10-05',
							info:'不可约',
							disable:false,
							dates:[]
						},
						{
							date:'2024-10-06',
							info:'可约',
							disable:true,
							dates:[
								{time:'09:00-10:00',appointPerson:null,disable:true},
								{time:'10:00-11:00',appointPerson:{name:'陈招解',location:'综合楼三楼301室(心理咨询室)'},disable:true},
								{time:'11:00-12:00',appointPerson:null,disable:true},
								{time:'13:00-14:00',appointPerson:null,disable:false},
								{time:'14:00-15:00',appointPerson:{name:'王晶晶',location:'综合楼三楼301室(心理咨询室)'},disable:true},
								{time:'15:00-16:00',appointPerson:{name:'刘美美',location:'综合楼三楼301室(心理咨询室)'},disable:true},
								{time:'16:00-17:00',appointPerson:{name:'余夹雪',location:'综合楼三楼301室(心理咨询室)'},disable:true},
								{time:'17:00-18:00',appointPerson:null,disable:true}
							]
						},
						{
							date:'2024-10-07',
							info:'不可约',
							disable:false,
						},
						{
							date:'2024-10-08',
							info:'不可约',
							disable:false,
						},
						{
							date:'2024-10-09',
							info:'可约',
							disable:true,
							dates:[
								{time:'09:00-10:00',appointPerson:null,disable:true},
								{time:'10:00-11:00',appointPerson:{name:'陈招解',location:'综合楼三楼301室(心理咨询室)'},disable:true},
								{time:'11:00-12:00',appointPerson:null,disable:true},
								{time:'13:00-14:00',appointPerson:null,disable:false},
								{time:'14:00-15:00',appointPerson:{name:'王晶晶',location:'综合楼三楼301室(心理咨询室)'},disable:true},
								{time:'15:00-16:00',appointPerson:{name:'刘美美',location:'综合楼三楼301室(心理咨询室)'},disable:true},
								{time:'16:00-17:00',appointPerson:{name:'余夹雪',location:'综合楼三楼301室(心理咨询室)'},disable:true},
								{time:'17:00-18:00',appointPerson:null,disable:false}
							]
						},
						{
							date:'2024-10-10',
							info:'可约',
							disable:true,
							dates:[
								{time:'09:00-10:00',appointPerson:null,disable:true},
								{time:'10:00-11:00',appointPerson:{name:'陈招解',location:'综合楼三楼301室(心理咨询室)'},disable:true},
								{time:'11:00-12:00',appointPerson:null,disable:true},
								{time:'13:00-14:00',appointPerson:null,disable:false},
								{time:'14:00-15:00',appointPerson:{name:'王晶晶',location:'综合楼三楼301室(心理咨询室)'},disable:true},
								{time:'15:00-16:00',appointPerson:{name:'刘美美',location:'综合楼三楼301室(心理咨询室)'},disable:true},
								{time:'16:00-17:00',appointPerson:{name:'余夹雪',location:'综合楼三楼301室(心理咨询室)'},disable:true},
								{time:'17:00-18:00',appointPerson:null,disable:true}
							]
						},
						{
							date:'2024-10-11',
							info:'可约',
							disable:true,
							dates:[
								{time:'09:00-10:00',appointPerson:null,disable:true},
								{time:'10:00-11:00',appointPerson:{name:'陈招解',location:'综合楼三楼301室(心理咨询室)'},disable:true},
								{time:'11:00-12:00',appointPerson:null,disable:false},
								{time:'13:00-14:00',appointPerson:null,disable:true},
								{time:'14:00-15:00',appointPerson:{name:'王晶晶',location:'综合楼三楼301室(心理咨询室)'},disable:true},
								{time:'15:00-16:00',appointPerson:{name:'刘美美',location:'综合楼三楼301室(心理咨询室)'},disable:true},
								{time:'16:00-17:00',appointPerson:{name:'余夹雪',location:'综合楼三楼301室(心理咨询室)'},disable:true},
								{time:'17:00-18:00',appointPerson:null,disable:true}
							]
						},
						{
							date:'2024-10-12',
							info:'不可约',
							disable:false,
						},
						{
							date:'2024-10-13',
							info:'不可约',
							disable:false,
						}
					];
					that.list=res;
					that.isLoading=false;
					//end
					clearTimeout(timer);
				},2000);
			}
		},
		computed:{
			
		},
		mounted(){
			this.getList();
		}
	}
</script>

<style lang="scss" scoped>
	.slot-content{
		flex: 0 0 auto;
		width: 100%;
	}
	/deep/.u-popup__content{
		border-radius: 30rpx !important;
		.u-modal__title{
			font-size: 40rpx !important;
			color: #65554d !important;
			padding-top: 40rpx !important;
			line-height: 1;
			font-weight: normal !important;
		}
		.u-modal__content{
			padding: 40rpx 40rpx 0 !important;
		}
		.u-line{
			display: none;
		}
		.u-modal__button-group__wrapper{
			height: 120rpx;
			border-radius: 0 !important;
			.u-modal__button-group__wrapper__text{
				font-size: 28rpx !important;
			}
		}
	}
	.filterBlock{
		padding-top: 20rpx;
		.block{
			.search{
				background: #fff;
				border-color: #fff;
			}
		}
		.select{
			/deep/ .uni-select{
				background: #fff !important;
				border-color: #fff !important;
			}
		}
	}
</style>
